<template>
    <div class="shopItem" @click="$router.push('/shopDetail/'+item._id)">
        <div class="poster"><div class="img"><img :src="require('@/assets/img/shop/'+item.poster)" alt=""></div></div>
        <div class="info">
            <div class="shopName">
                <div class="name">{{item.name}}</div>
                <div class="more"><svg t="1670425836660" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10850" width="48" height="48"><path d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z" p-id="10851" fill="#aaaaaa"></path></svg></div>
            </div>
            <div class="subInfo">
                <div class="left">
                    <span class="rating">{{item.rating}}分</span>
                    <span class="salesMonthly">月售{{item.sales_monthly}}</span>
                </div>
                <div class="right">
                    <span class="duration">{{item.delivery_duration}}分钟</span>
                    <span class="distance">{{(item.distance / 1000 >= 1 ? parseFloat(item.distance / 1000).toFixed(1)+'km' : item.distance+'m')}}</span>
                </div>
            </div>
            <div class="th3Info">
                <div class="left">
                    <span class="startingPrice">起送¥{{item.starting_price}}</span>
                    <span class="deliveryPrice" :class="item.delivery_fee?'':'zero'">{{item.delivery_fee?'配送¥'+item.delivery_fee:'免配送费'}}</span>
                </div>
            </div>
            <div class="tabRecommend">
                <span v-for="(tab,index) in item.tab_recommend" :key="tab+index">"{{tab}}"</span>
            </div>
            <div class="discount" @click.stop="(item.showDiscount = !item.showDiscount)">
                <div class="left">
                    <div class="default" v-if="(item.showDiscount == false)">
                        <template v-if="item.discount.activities[0].name=='老朋友补贴'">
                            <span class="allowance">{{item.discount.activities[0].value[0]}}元老朋友补贴</span>
                        </template>
                        <template v-else-if="item.discount.activities[0].name=='首单光顾立减'">
                            <span>首单光顾减{{item.discount.activities[0].value[0]}}</span>
                        </template>
                        <template v-else>
                            <span>{{item.discount.activities[0].value[0]}}</span>
                        </template>

                        <template v-if="item.discount.welfares[0].name=='爆红包'">
                            <span>爆红包最高{{item.discount.welfares[0].value}}元</span>
                        </template>
                        <template v-else-if="item.discount.welfares[0].name=='无门槛红包'">
                            <span class="unlimited">{{item.discount.welfares[0].value}}元无门槛</span>
                        </template>
                        <template v-else-if="item.discount.welfares[0].name=='店铺红包'">
                            <span>{{item.discount.welfares[0].value}}元店铺红包</span>
                        </template>
                        <template v-else>
                            <span>{{item.discount.welfares[0].name}}-{{item.discount.welfares[0].value}}</span>
                        </template>
                    </div>
                    
                    <div class="discountDrop" v-if="item.showDiscount">
                        <div class="activity">
                            <div class="title"><label>活动</label></div>
                            <div class="tags">
                                <template v-for="(tag,index) in item.discount.activities" :key="tag._id">
                                    <template v-for="(value,index) in tag.value" :key="tag._id">
                                        <span v-if="tag.name=='老朋友补贴'" class="allowance">{{value}}元老朋友补贴</span>
                                        <span v-else-if="tag.name=='首单光顾立减'">首单光顾减{{value}}</span>
                                        <span v-else>{{value}}</span>
                                    </template>
                                </template>
                            </div>
                        </div>
                        <div class="welfare">
                            <div class="title"><label>红包</label></div>
                            <div class="tags">
                                <template v-for="(tag,index) in item.discount.welfares" :key="tag._id">
                                    <span v-if="tag.name=='爆红包'">爆红包最高{{tag.value}}元</span>
                                    <span v-else-if="tag.name=='无门槛红包'" class="unlimited">{{tag.value}}元无门槛</span>
                                    <span v-else-if="tag.name=='店铺红包'">{{tag.value}}元店铺红包</span>
                                    <span v-else>{{tag.value}}</span>
                                </template>
                            </div>
                        </div>
                        <div class="service">
                            <div class="title"><label>服务</label></div>
                            <div class="tags">
                                <span v-for="(tag,index) in item.discount.service" :key="tag._id">{{tag}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <!-- <van-icon name="arrow-up" /> -->
                    <van-icon :name="item.showDiscount?'arrow-up':'arrow-down'"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'ShopItem',
    setup(){
        const shopPush = (shop_id) => {
            console.log(shop_id);
        }
        return{
            shopPush
        }
    },
    props:['item']
}
</script>

<style>
.shopItem{
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
}
.shopItem .poster{width: 35%;}
.shopItem .poster .img{
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.shopItem .poster img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50%;
}
.shopItem .info{
    width: 65%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: rgb(134, 134, 134);
}
.shopItem .info>div{margin: 1px 0;line-height: 1;}
.shopItem .info .shopName{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #000;
}
.shopItem .info .shopName .name{
    width: 80%;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shopItem .info .shopName .more{
    width: 20%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.shopItem .info .shopName .more svg{width: 20px;height: 20px;}
.shopItem .info .subInfo{display: flex;justify-content: space-between;align-items: center;}
.shopItem .info span{
    display: inline-block;
    margin: 3px 0;
    margin-right: 5px;
}
.shopItem .info .subInfo .left .rating{color: rgb(255, 113, 70);font-weight: bold;}
.shopItem .info .th3Info .left .zero{color: rgb(255, 129, 91);}
.shopItem .info .tabRecommend span{
    padding: 3px;
    color: rgb(255, 113, 70);
    background: rgba(255, 113, 70, 0.15);
    border-radius: 5px;
}
.shopItem .info .discount{display: flex;align-items: flex-start;justify-content: space-between;}
.shopItem .info .discount .right{height: 20px;line-height: 20px;}
.shopItem .info .discount span{
    padding: 2px;
    background: rgb(255, 255, 255);
    color: rgb(255, 81, 28);
    border: 1px solid rgb(255, 81, 28);
    border-radius: 5px;
}
.shopItem .info .discount span.allowance{color: rgb(255, 255, 255);background: rgb(255, 81, 28);}
.shopItem .info .discount span.unlimited{color: rgb(199, 161, 24);background: #fff;border: 1px solid rgb(199, 161, 24);}
.shopItem .info .discount .service span{color: rgb(135, 135, 135);background: #fff;border: 1px solid rgb(135, 135, 135);}
.shopItem .info .discountDrop{display: flex;flex-direction: column;}
.shopItem .info .discountDrop>div{display: flex;}
.shopItem .info .discountDrop div.title{width: 15%;flex-shrink: 0;}
.shopItem .info .discountDrop div.title label{display: inline-block;height: 22px;line-height: 22px;}

</style>